<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String url = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	
%> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" href="<%=basePath%>css/AdminLTE.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath%>css/ionicons.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.css">
    <link rel="stylesheet" href="<%=basePath%>css/skins/_all-skins.min.css">  
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="<%=basePath%>css/sweetalert/sweetalert.css">
    <style type="text/css">
            .font_wsg{
        font-weight:bold;        
        font-family:"微软雅黑","黑体","宋体";
        }
               .se{
		 background-color:#FEF2E8;
		}
        </style>
</head>
<body>
  <section class="content-header">
    <h1>
        我的工作台
        <small>商品热度排名</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">我的工作台</a></li>
        <li class="active">商品热度排名</li>
    </ol>
</section>
<section class="content" style="margin-left: 15px;margin-right: 15px;">
<div class="row col-md-8 col-xs-6">
<H1 class="text-red font_wsg">热门商品前十</H1>
<table id="tt" class="table table-bordered" style="display:none;">
<thead>
        <tr>
                <th>商品名称</th>
                <th>销售数量</th>
                <th>销售额</th>
                <th>排名</th>
        </tr>
        </thead>
        <tbody id="tbd">
        </tbody>
</table>
<div class="row" id="pp" style="margin-top:15px;margin-left: 15px;display:none;">
<p class='font_wsg'>截止目前，<span id="payF" class="text-red h1"></span>受到了会员顾客的青睐</p>
<p class='font_wsg'>卖得这么火爆有什么诀窍？</p>
<p class='font_wsg'>妹子能分享下其中的心得么？</p>
</div>
</div>
</section>
</body>
<script src="<%=basePath%>js/jquery-2.2.3.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-table.js"></script>
<script src="<%=basePath%>js/jquery.easyui.min.js"></script>
<script src="<%=basePath%>js/sweetalert/sweetalert.min.js"></script>
<script src="<%=basePath%>js/locales/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
$(function(){
	$.ajax({
  		url: "<%=basePath%>order/payTypeRank.do",
  		type : "post",  
		dataType:"json",
		data: null,
  		success: function(data){
  			$("#tbd").empty();
  			if(data.payType!=''){
  				$("#payF").html(data.payType);
  				$("#pp").fadeIn(5000);
  			}
  			var list=data.data;
  			var length=list.length;
  			var obj;
  			if(length>10){
  				length=10;
  			}
  			if(length>0){
  			for(var i = 0; list && i <length; i++){
  				obj=list[i];
  				if(obj.payType==''||obj.payType==null){
  					obj.payType='其他';
  				}
  				$("#tbd").append('<tr><td>'+obj.payType+'</td><td>'+obj.cNum+'</td><td>'+obj.totalMoney+'</td><td>'+obj.rank+'</td></tr>');
  			}
  			changeColor();
  			};
  		}
  	});
	$("#tt").fadeIn(3000);
});

function changeColor(){
	 $("tr").mouseover(function (){
			  
			  $(this).addClass("se"); 
			  
			 }).mouseout(function (){
			  
			  $(this).removeClass("se");
			  
			 });
}
</script>
</html>